<template>
  <div class="content">
    <div class="kong" @click="buyTool">
      <!-- <img src="https://akk.028wkf.cn/kdb-weapp-img/compressed/yxgj.png" alt> -->
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/yxgj2.png"
        alt
        mode="scaleToFill"
      />
    </div>
    <div
      class="list"
      v-for="(item, index) in info"
      :key="index"
      @click="listLink(item.link)"
    >
      <div class="listMiddle">
        <p>{{ item.name }}</p>
        <span>{{ item.introduce }}</span>
      </div>
      <div class="listPositioning">
        <img :src="item.icon" mode="scaleToFill" alt />
      </div>
      <div class="listLeft">
        <img :src="item.src" mode="scaleToFill" alt />
      </div>
    </div>
    <div
      class="list"
      v-for="(item, index) in infoList"
      :key="index"
      @click="listLink(item.link)"
    >
      <div class="listMiddle">
        <p>{{ item.marketingName }}</p>
        <!-- <span>{{item.introduce}}</span> -->
        <span>{{ item.content }}</span>
      </div>
      <div class="listPositioning">
        <img :src="item.icon" mode="scaleToFill" alt />
      </div>
      <div class="listLeft">
        <img :src="item.src" mode="scaleToFill" alt />
      </div>
    </div>
    <div class="kong2"></div>
    <button class="btn" @click="goVirtualUser">虚拟用户</button>
  </div>
</template>

<script>
// import { FIND_COUPON_TYPE_PAGE_API } from '@/api'
import { FIND_SHOP_BASE_INFO, FIND_BY_SHOPID_PAGEAPI } from '@/api'

export default {
  components: {},

  data () {
    return {
      customerId: '',
      info: [
        {
          name: '优惠券',
          introduce: '找到新用户，留住老用户',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/ayhq.png',
          link: '/pages/shop-management/coupon-list/main'
        }
      ],
      infoHitn: [
        {
          name: '趣分享',
          introduce: '有效递推，让更多用户看到你',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/aqfx.png',
          link: '/pages/home/share/main',
          marketingType: 'SHARE'
        },
        {
          name: '拼团',
          introduce: '限时拼团，获得更多客源',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/aqfx.png',
          link: '/pages/home/group/index/main',
          marketingType: 'GROUP'
        },
        {
          name: '信贷服务',
          introduce: '信贷服务',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/axdfw.png',
          link: '/pages/home/marketing-tool-on-off/main?type=DIS',
          marketingType: 'DIS'
        },
        {
          name: '布谷还款',
          introduce: '布谷还款',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/abghk.png',
          link: '/pages/home/marketing-tool-on-off/main?type=REPAY',
          marketingType: 'REPAY'
        },
        {
          name: '布谷收款',
          introduce: '布谷收款',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/abgck.png',
          link: '/pages/home/marketing-tool-on-off/main?type=RECEIPT',
          marketingType: 'RECEIPT'
        },
        {
          name: '短信营销',
          introduce: '有新优惠，让用户更早知道',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/abgsk.png',
          link: '#',
          marketingType: 'REWARD_OPEN_SHOP'
        },
        // {
        //   name: '幸运大转盘',
        //   introduce: '幸运大转盘',
        //   src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/abgck.png',
        //   link: '/pages/home/lucky-wheel/main',
        //   marketingType: 'LUCK_WHEEL'
        // },
        {
          name: '秒杀活动',
          introduce: '秒杀活动',
          src: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/abgck.png',
          link: '/pages/businessSide/webViewEntry/main',
          marketingType: 'SECOND_KILL'
        }
      ],
      infoList: []
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this._findTool()
    // this.isEntity()
  },
  methods: {
    buyTool () {
      this.$router.push('/pages/shop-management/marketing-buy-tool/main')
    },
    listLink (link) {
      if (link === '#') {
        this.$toast('功能暂未开放，敬请期待~~~')
      } else {
        this.$router.push(link)
      }
    },
    goVirtualUser () {
      this.$router.push('/pages/home/group/virtual-list-user/main')
    }, // 虚拟用户
    _findTool () {
      FIND_BY_SHOPID_PAGEAPI(this.account.shopId, 1, 99)
        .then(r => {
          if (r.data.code === '0') {
            let data = [...r.data.data.list]

            data.forEach((e, i) => {
              this.infoHitn.forEach((_, n) => {
                if (e.marketingType === _.marketingType) {
                  // e.introduce = _.introduce
                  e.introduce = _.content
                  e.src = _.src
                  e.link = _.link
                  if (e.amount <= 0) {
                    e.icon = _.icon
                  }
                }
              })
            })
            let typeList = [
              'SHARE',
              'GROUP',
              'DIS',
              'REPAY',
              'RECEIPT',
              'SECOND_KILL'
            ]
            let list = data.filter(_ => typeList.includes(_.marketingType))

            // for (let i = 0; i < data.length; i++) {
            //   if (
            //     data[i].marketingType === 'SHARE' ||
            //     data[i].marketingType === 'GROUP' ||
            //     data[i].marketingType === 'DIS' ||
            //     data[i].marketingType === 'REPAY' ||
            //     data[i].marketingType === 'RECEIPT' ||
            //     data[i].marketingType === 'SECOND_KILL'
            //   ) {
            //     list.push(data[i])
            //   }
            // }
            this.infoList = list
            console.log(this.infoList)
          } else {
            this.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    isEntity () {
      FIND_SHOP_BASE_INFO(this.account.shopId)
        .then(r => {
          console.log('这个暂时不需要,是判断是否为实业宝的', r)
        })
        .catch(e => {
          console.info(e)
        })
    } // 判断是否为实体店
  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
  background: #eef2f5;
  .kong {
    width: 100%;
    height: 160px;
    margin-bottom: 30px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .list {
    width: 340px;
    height: 100px;
    margin: 0 auto 20px;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 10px;
    .listLeft {
      width: 70px;
      height: 50px;
      display: flex;
      align-items: center;
      margin: 0 10px;
      img {
        width: 60px;
        height: 50px;
      }
    }
    .listMiddle {
      font-size: 14px;
      color: #707070;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      height: 50px;
      p {
        font-size: 16px;
        color: #000;
      }
      span {
        width: 245px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .listPositioning {
      position: absolute;
      top: -5px;
      right: -5px;
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
  .kong2 {
    height: 50px;
  }
  .btn {
    width: 100%;
    height: 45px;
    background: #5d93fd;
    font-size: 16px;
    color: #fff;
    line-height: 45px;
    position: fixed;
    bottom: 0;
    border-radius: 0;
  }
}
</style>
